<template>
	<div class="userbox">
		<div class="formdata">
			<el-form :model="form" :rules="rules" ref="brandForm" label-width="auto" label-position="right">
				<div class="left-side">
					<el-form-item v-if="form.accountEmail" :label="$t('brand_data.form.brandId')" prop="accountEmail" >
						<span>{{ form.accountEmail }}</span>
					</el-form-item>
					<el-form-item :label="$t('brand_data.name')" prop="name" >
						<el-input type="text" v-model="form.name" clearable :placeholder="$t('formRule.inputPlaceholder')" :disabled="disabled"></el-input>
					</el-form-item>
					<el-form-item :label="$t('brand_data.address')" prop="officialAddress" >
						<el-input type="text" v-model="form.officialAddress" clearable :placeholder="$t('formRule.inputPlaceholder')" :disabled="disabled"></el-input>
					</el-form-item>
					<el-form-item :label="$t('brand_data.form.zipCode')" prop="postalCode" >
						<div style="display: flex;justify-content: space-between;width:100%">
							<el-input type="text" style="width:28%" v-model="form.postalCode" clearable :placeholder="$t('formRule.inputPlaceholder')" :disabled="disabled"></el-input>
							-
							<el-input type="text" style="width:68%" v-model="form.postalNo" clearable :placeholder="$t('formRule.inputPlaceholder')" :disabled="disabled"></el-input>
						</div>
					</el-form-item>
				</div>
				<div class="right-side">
					<el-form-item :label="$t('brand_data.email')" prop="officialEmail" >
						<el-input type="text" v-model="form.officialEmail" clearable :placeholder="$t('formRule.inputPlaceholder')" :disabled="disabled"></el-input>
					</el-form-item>
					<el-form-item :label="$t('brand_data.phone')" prop="phoneCode" >
						<div style="display: flex;justify-content: space-between;width:100%">
							<el-input type="text" style="width:28%" v-model="form.phoneCode" clearable :placeholder="$t('formRule.codePlaceholder')" :disabled="disabled"></el-input>
							<el-input type="text" style="width:68%" v-model="form.phoneNo" clearable :placeholder="$t('formRule.phonePlaceholder')" :disabled="disabled"></el-input>
						</div>
					</el-form-item>
					<el-form-item :label="$t('brand_data.quantity')" prop="cinemaQuantity" v-if="form.brandId">
						<span>{{ form.cinemaQuantity }}</span>
					</el-form-item>
				</div>
			</el-form>
			<div v-if="form.brandId">
				<el-row type="flex" justify="center">
					<el-col><div class="grid-content bg-purple">{{ $t('brand_data.form.cinemaList') }}</div></el-col>
				</el-row>
				<el-row  type="flex" justify="flex-start">
					<el-col v-for="(item,index) in form.cinemaList" :key="index" class="el-col-list"><div class="grid-content bg-purple-list">{{ item.theatreName }}</div></el-col>
				</el-row>
			</div>
		</div>
		<div v-if="showProp">
			<sCDialog :modelValue="showProp" :showFullscreen="false" @closeDialog="openUploadFile" :closeOnClickModal="false">
				<template v-slot:header>
					{{ $t('brand_data.createCinemaTitle') }}
				</template>
				<div class="cont">
					<el-form :model="form" :rules="rules" ref="brandForm" label-width="auto" label-position="right" style="flex-wrap: wrap">
						<div class="item">
							<el-form-item :label="$t('account_data.accountEmail')" prop="accountEmail">
								<el-input v-model="form.accountEmail" clearable></el-input>
							</el-form-item>
						</div>
						<div class="item">
							<el-form-item :label="$t('account_data.password')" prop="password">
								<el-input type="password" v-model="form.password" clearable show-password></el-input>
							</el-form-item>
						</div>
					</el-form>
				</div>
				<template v-slot:footer>
					<el-button @click="showProp=false" >{{$t('table_data.cancelText')}}</el-button>
					<el-button type="primary" :loading="isSaveing" @click="submit('upload')">{{$t('table_data.saveText')}}</el-button>
				</template>
			</sCDialog>
		</div>
		<div id="footer" v-if="!disabled">
			<el-button @click="visible=false" >{{$t('table_data.cancelText')}}</el-button>
			<el-button type="primary" :loading="isSaveing" @click="submit()">{{$t('table_data.saveText')}}</el-button>
		</div>
	</div>
</template>

<script>
import  { brand } from '@/mixin/brand'
import sCDialog from "@/components/scDialog"

	export default {
		emits: ['success', 'closed'],
		components: {
			sCDialog
		},
		mixins: [brand],
		data() {
			return {
				createFileId: '',
			}
		},
		watch: {
			// "scDialogData": {
      // 	handler: function (val) {
			// 		// if(val.isDefense)this.getBlob()
			// 	},
			// 	immediate: true,
     	// 	deep: true // 可以深度检测到 person 对象的属性值的变化
			// }
		},
		computed: {
			icon() {
				return ()=>{
					const dUrl = decodeURIComponent(this.form.fileUrl);
					const str = dUrl.split('?')[0].split('.');
					console.log('fileType',str[str.length-1]);
					const type = str[str.length-1];
					if(type){
						if(['jpg','jpeg','png','gif','webp','tiff','bmp','heif','svg'].includes(type)){
							return 'sc-icon-img'
						}else if(['mp3','wma','ape'].includes(type)){
							return 'sc-icon-mp3'
						}else if(['mp4','mp5','avi','wmv'].includes(type)){
							return 'sc-icon-video'
						}else if(['pdf','txt','xlsx'].includes(type)){
							return 'sc-icon-pdf'
						}else{
							return 'sc-icon-none'
						}
					}
					return 'sc-icon-none'
				}
			}
		},
		mounted(){
			this.disabled = this.$route.query.type=='detail'?true:false;
			this.$store.commit("updateViewTagsTitle", this.disabled?this.$t('menu.brandDetail'):this.$t('menu.brandEdit'))
			if(this.$route.query.id != 'add'){
				this.getInfo();
			}
		},
		methods: {
			async getInfo(){
				let id = this.$route.query.id;
				const res = await this.$API.brand.brandDetail.get(id);
				this.form = res.data;
			},
			closeTag(){
				const tagList = this.$store.state.viewTags.viewTags;
				const tag = this.$route;
				const nowTagIndex = tagList.findIndex(item => item.fullPath == tag.fullPath)
				this.$store.commit("removeViewTags", tag)
				this.$store.commit("removeIframeList", tag)
				this.$store.commit("removeKeepLive", tag.name)

				const leftView = tagList[nowTagIndex - 1]
				if (leftView) {
					this.$router.push(leftView)
				} else {
					this.$router.push('/')
				}
			},
			//表单提交方法
			submit(type){
				console.log('data:',this.form)
				this.$refs.brandForm.validate(async (valid) => {
					if (valid) {
						if(this.$route.query.type != 'edit')this.showProp = true;
						if(type=='upload' || this.$route.query.type == 'edit'){
							this.isSaveing = true;
							const form = {};
							for(let i in this.form){
								if(this.form[i])form.i = this.form.i
							}
							Object.assign(form,this.form);
							if(form.cinemaList&&form.cinemaList.length)form.cinemaList = form.cinemaList.map(n=>n.theatreId)
							let api = this.$API.brand.brandUpload;
							// if(this.$route.query.type == 'add')api=this.$API.brand.brandCreate
							try {
								var res = await api.post(form);
								this.isSaveing = false;
								if(res.code == 'OK'){
									this.$emit('success', this.form, this.mode)
									this.$message.success(this.$t('table_data.operasucc'))
									this.closeTag();
								}else{
									this.$alert(res.message, this.$t('table_data.tips'), {type: 'error'})
								}
							}catch(err){
								this.isSaveing = false;
								console.log(err)
							}
						}
					}
				})
			}
		}
	}
</script>

<style scoped>
.userbox {
	background: #fff;
	padding: 30px;
	margin: 16px;
	border: 1px solid #CCCCCC;
	border-radius: 4px;
}
.grid-content {
	border: 1px solid #eee;
	font-size: 14px;
	min-height: 50px;
	/* line-height: 50px; */
	padding-left: 12px;
	display: flex;
  align-items: center;
}
.bg-purple {
	background: #F6F8F9;
	color: #888;
	
	display: flex;
    align-items: center;
}
.el-col-list {
	flex: 0 0 33.3%;
}
.bg-purple-light {
	color: #000;
}
.el-form {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
}
.box-card {
	width: 100%
}
:deep .el-upload-list {
	max-height: 150px;
  overflow-y: scroll;
}
:deep .el-transfer {
    width: 80%;
  margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
}
:deep .el-transfer-panel__filter {
    width: 93%;
}
.chooseCinemabox-title {
    font-size: 20px;
  margin: 0 auto 20px;
}
.chooseCinemabox {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    /* width: 85%; */
    margin: 0 auto 30px;
    font-size: var(--el-form-label-font-size);
}
:deep .el-transfer-panel {
    width: 40%;
}
.scrollbox {
	width: 100%;
	overflow-y: scroll;
	display: flex;
	max-height: 700px;
	flex-wrap: wrap;
}
.scrollbox-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	border: 1px solid #eee;
	margin: 0 10px 10px 0;
}
.sortNuminput {
	display: flex;
}
/* .scrollbox div {
	margin-right: 10px;
} */
.scrollbox .uImg {
	width: 200px;
	height: auto;
	/* height: 400px; */
  /* object-fit: contain; */
}
.left-side, .right-side {
	width: 46%;
}
.uploadbtn {
	cursor: pointer;
}
.uploadbtn:hover {
	color: var(--el-color-primary);
}
.item {
	width: 100%;
	display: flex;
	align-items: flex-start;
}
.tips {
	color: #888;
	font-size: 14px;
	width: 100%;
}

.datebox {
	width: 100%;
	display: flex;
	justify-content: flex-start;
}
.datebox_left,.datebox_right {
	width: 50%;
}
.item-right {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: space-between;
	height: 118px;
}
.el-form-item {
	width: 100%;
}
.leftlabel {
	width: 120px;
}
.el-select {
	width: 100%;
}
.item-lastName {
	display: flex;
	justify-content: space-between !important;
	align-content: space-between !important;
	/* height: 200px; */
	width: 100%;
	margin-bottom: 18px;
}
.item-desc {
	/* height: 500px; */
}
.icon {
	width: auto;
  height: 40px;
}
.item-right{
	height: 140px;
}
.head {
	width: 500px;
  height: 281px;
}
.background {
	width: 500px;
	height: 300px;
}
.rightInput {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-content: space-between;
	width: 100%;
}
.textarea {
	height: 600px;
}
.item-right-form {
	display: flex;
}
.item>div:nth-child(2){
	margin-left: 200px;
}
#footer {
	display: flex;
	justify-content: center;
	margin-top: 10px;
}


@media only screen and (max-width: 750px) {
	.left-side, .right-side {
		width: 100%;
	}
	.el-form {
		flex-wrap: wrap;
	}
}
</style>
